<template>
  <div>
    <div class="header-select">
      <el-select v-model="valueTime" class="m-2 select-year" placeholder="Select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="valueCompany" class="m-2 select-company" placeholder="Select">
        <el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="echarts" ref="echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      valueTime: '2019',
      valueCompany: '集团',
      options: [
        {
          value: '2019',
          label: '2019',
        },
        {
          value: '2020',
          label: '2020',
        },
        {
          value: '2021',
          label: '2021',
        },
        {
          value: '2022',
          label: '2022',
        },
        {
          value: '2023',
          label: '2023',
        },
      ],
      optionsCopy: [
        {
          value: '集团',
          label: '集团',
        },
        {
          value: '上市公司',
          label: '上市公司',
        },
        {
          value: '民营企业',
          label: '民营企业',
        },
      ],
    };
  },
  mounted() {
    this.getCharts();
  },
  methods: {
    getCharts() {
      const el = this.$refs.echarts;
      const myChart = echarts.init(el);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          min: 0,
          interval: 100,
          axisLine: {
            show: true,
          },
        },
        yAxis: {
          type: 'category',
          data: ['现计划', '原计划'],
        },
        series: [
          {
            type: 'bar',
            barWidth: 40,
            data: [
              {
                value: 210,
                itemStyle: {
                  color: '#ffa762',
                },
              },
              {
                value: 490,
                itemStyle: {
                  color: '#389fff',
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.header-select {
  text-align: right;
  margin-bottom: 7px;
}
:deep(.el-select) {
  width: 100px;
}
:deep(.el-input__wrapper) {
  height: 26px;
}
.select-year {
  margin-right: 10px;
}
.select-company {
  margin-right: 24px;
}
.echarts {
  width: 1172px;
  height: 260px;
}
</style>
